<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="bootstrap.min.css" rel="stylesheet" />
		<script src="js/angular.js"></script>
		<style type="text/css">
			body {
				font-family: "微软雅黑";
			}

			.pagination {
				margin: 0;
				padding: 0;
			}
			#aaaa{
				width: 100%;
				height: 100px;
				background: gold;
				position: fixed;
				bottom: 0
			}
			span{
				font-size: 30px;
				height: 100%;
				line-height: 100px;
			}
		</style>
	</head>
	<body ng-app="app1" ng-controller="ctl">
     <div id="aaaa">
     	<span id="span1">消费总额：</span><span id="span2"></span>
     </div>
		<!--<footer class="nav navbar navbar-fixed-bottom">
			<div><a ui-sref="btn">本天账单</a></div>
			<div><a ui-sref="btn">本月账单</a></div>
		</footer>-->

		<div class="container">

			<div class="page-header">
				<h2><strong>你的剁手记录</strong></h2>
			</div>

			<!-- 查询结果开始 -->
			<table class="table table-striped table-bordered" id="results">
				<caption>
					<div style="float:right;padding:5px">
						<a href="#" class="btn btn-primary btn-sm" onclick="showAdd()">添加账单</a>
					</div>
				</caption>

				<thead>
					<tr>
						<!--    <th>编号</th>-->
						<th>类别</th>
						<th>花费金额</th>
						<th>记账时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="v in arr">
						<!--   <td>{{v.a}}</td>-->
						<td>{{v.name}}</td>
						<td>{{v.mouty}}</td>
						<td>{{v.time |date : 'yyyy-MM-dd'}}</td>
						<td>
							<!-- <button class="btn btn-primary btn-sm">编辑</button> -->
							<button class="btn btn-warning btn-sm" ng-click="rm($index)">删除</button>
						</td>
					</tr>
					<tr>

						<td colspan="3" style="font-family: 华文新魏; color: white;font-size: 20px;"></td>

						<!-- <button class="btn btn-primary btn-sm">编辑</button> -->
						<td>
							<a id="jeshu" style="font-family: 华文新魏;" href="tuichu.html">退出</a>
							<!-- <button class="btn btn-warning btn-sm></button>-->
						</td>
					</tr>
				</tbody>
			</table>
			<!-- 查询结果结束 -->
		</div>

		<!-- 添加/修改员工信息的弹出对话框开始 -->
		<div class="modal fade" id="employeeDlg">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">编号</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="form-group">
								<label for="name" class="col-md-3 control-label">物品名称：</label>
								<div class="col-md-8">
									<input type="text" id="name" placeholder="名称" class="form-control" ng-model="name" />
								</div>
							</div>

							<div class="form-group">
								<label for="gender" class="col-md-3 control-label">金额：</label>
								<div class="col-md-8">
									<input type="text" id="name" placeholder="金额" class="form-control" ng-model="mouty" />
								</div>
							</div>

							<div class="form-group">
								<label for="birthday" class="col-md-3 control-label">时间：</label>
								<div class="col-md-8">
									<input type="date" id="birthday" class="form-control" ng-model="time" />
								</div>
							</div>

							<div class="form-group">
								<div class="text-center form-group">
									<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="add()" id="qd">确定</button>
									<!-- <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

		<!-- 添加/修改员工信息的弹出对话框结束 -->

		<script src="js/jquery-1.10.2.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/bootbox.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#results td button.btn-primary").bind("click", showEdit);
				$("#results td button.btn-warning").bind("click", deleteConfirm);
			});

			function showAdd() {
				clearDlg();
				$("#employeeDlg").modal({
					"backdrop": "static"
				});
			}

			function showEdit(ev) {
				var tr = ev.target.parentElement.parentElement;
				fillDlg($(tr));
				$("#employeeDlg").modal({
					"backdrop": "static"
				});
			}

			function clearDlg() {
				$(".modal-title").html("添加账单");
				$('.form-control').val()
			}

			function deleteConfirm(ev) {
				var tr = $(ev.target.parentElement.parentElement);
				var name = tr.children()[1].innerHTML;
				bootbox.confirm("确实要删除账单【" + name + "】吗？", function(choice) {
					if(choice) {
						tr.remove();
					}
				});
			}



			var app = angular.module("app1", []);
			app.controller("ctl", function($scope) {

				$scope.mouty = $scope.m;

				dataStr = localStorage.getItem('ly');
				if(dataStr) {
					dataObj = JSON.parse(dataStr);
					$scope.arr = dataObj.info;

				} else {
					//向本地存储里存一个key为ly的对象
					localStorage.setItem('ly', '{"info":[]}');
				}
				$scope.add = function() {

					dataStr = localStorage.getItem('ly');

					dataObj = JSON.parse(dataStr);

					dataObj.info.push({
						"name": $scope.name,
						"mouty": $scope.mouty,
						"time": $scope.time
					});

					$scope.arr = dataObj.info;
					dataStr = JSON.stringify(dataObj);
					localStorage.setItem('ly', dataStr);

				}

				$scope.rm = function(index) {

					dataObj.info.splice(index, 1);

					dataStr = JSON.stringify(dataObj);
					localStorage.setItem('ly', dataStr);

				}

			})
		</script>

		<script type="text/javascript">
		var btn = document.getElementsByName('button');
		var sp = document.getElementById('span1');


        dataStr = localStorage.getItem("ly");
        dataObj = JSON.parse(dataStr);
				var arr = dataObj.info;
				// console.log(arr)
				var sum = 0;
        for(var i = 0;i<arr.length;i++){
            console.log(arr[i].mouty);
            sum += parseInt(arr[i].mouty);
				}
        span2.innerHTML = sum + '元';
		</script>
	</body>

</html>
